div.select2-drop-mask {
  z-index: 999;
}
.select2-container {
  display: block;

  .select2-choice {
    height: $input-height;
    line-height: 2.2;
    border-color: $input-border-color;
    background-image: none;
    background-color: $input-bg;
    color: $gray-700;

    &,
    .select2-arrow {
      border-radius: $border-radius;
    }

    .select2-arrow {
      background-image: none;
      background-color: $input-bg;
      border:none;
      width: 30px;

      b {
        background-image: url(asset-path("backend-chevron-down.svg")) !important;
        overflow: hidden !important;
        vertical-align: middle !important;
        background-repeat: no-repeat !important;
        background-size: 1rem !important;
        background-position: 48% !important;
      }
    }

    .select2-chosen {
      vertical-align: middle;
      display: inline;
    }

    abbr {
      top: 12px;
    }
  }
}

.select2-container-multi .select2-choices .select2-search-field input {
  color: $gray-700;
}

.select2-search input {
  border-color: $input-border-color;
  border-radius: $border-radius;
  background-image: url(asset-path("backend-search.svg")) !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  background-repeat: no-repeat !important;
  background-size: 1rem !important;
  background-position: 97% !important;
}

.select2-drop {
  z-index: $zindex-dropdown;
  &, &.select2-drop-above {
    border-radius: $border-radius;
    box-shadow: none;
  }
}

.select2-container-active {
  .select2-choice,
  .select2-choices {
    border-color: $input-focus-border-color;
    border-bottom: 1px solid $input-focus-border-color;
  }
  &, & a {
    box-shadow: none !important;
  }
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
  background-image: none;
}


.select2-drop.select2-drop-active {
  border-color: $input-focus-border-color;
  border-top: 0;
  border-radius: 0 0  $border-radius $border-radius;
  margin-top: -6px;
}

.select2-drop.select2-drop-above.select2-drop-active {
  border-color: $input-focus-border-color;
  border-top: 1px solid $input-focus-border-color;
  border-radius: $border-radius $border-radius 0 0;
  margin-top: 6px;
}

.select2-container.select2-drop-above .select2-choice {
  border-color: $input-focus-border-color !important;
  border-radius: $border-radius;
}
.select2-result-label {
  color: $gray-900;
}

.select2-results .select2-highlighted {
  background-color: $primary;
  border-radius: $border-radius;

  .select2-result-label {
    color: white;
  }
}

.select2-container-multi {
  .select2-choices {
    min-height: $input-height;
    border-radius: $border-radius;
    line-height: 1;
    border-color: $input-border-color;
    background-image: none;
    background-color: $input-bg;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .select2-search-choice {
      @extend .badge;
      @extend .badge-info;
      box-shadow: none;
      border: none;
      background-image: none;
      margin: 5px;
      padding: 7px;

      .select2-search-choice-close {
        background-image: url(asset-path("backend-cancel.svg")) !important ;
        position: absolute;
        left: 7px;
        top: 7px;
        background-position: 50% !important;

      }

      div {
        padding-left: 17px;
      }
    }
  }

  &.select2-container-active {
    .select2-choices {
      box-shadow: none;
      border-color: $input-focus-border-color;
    }
  }
}

.select2-search input,
.select2-search-choice-close,
.select2-container .select2-choice abbr,
.select2-container .select2-choice .select2-arrow b {
    background-size: $select2-icon-size !important;
}

.select2-container.select2-allowclear .select2-choice abbr{
  background-image: url(asset-path("backend-cancel.svg")) !important ;
  overflow: hidden !important;
  vertical-align: middle !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
  right:30px;
  background-size: $select2-icon-size !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: 50% !important;
}

// Bugfix for required elements
select.select2[required="required"] {
  display: inline-block !important;
  width: 0;
  overflow: hidden;
  opacity:0;
  filter:alpha(opacity=0);
}
